﻿<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :model="AdministratorVoQuery"
      class="demo-form-inline"
    >
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <el-form-item label="管理员名称">
        <el-input
          v-model="AdministratorVoQuery.name"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <el-form-item label="手机号">
        <el-input
          v-model="AdministratorVoQuery.number"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      &nbsp; &nbsp; &nbsp; &nbsp;
      <el-form-item>
        <el-button type="primary" @click="reseDdta">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table
        :data="list"
        border
        style="width: 80%"
        ref="multipleTable"
        row-key="id"
      >
        <el-table-column fixed label="序号" width="120" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="管理员名称"
          width="200"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="isDisable"
          label="状态"
          width="200"
          align="center"
          ><template slot-scope="scope">
            <span v-if="scope.row.isDisable == 1">启用</span>

            <span v-if="scope.row.isDisable == 0">禁用</span>
          </template>
        </el-table-column>

        <el-table-column prop="number" label="手机" width="200" align="center">
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="创建时间"
          align="center"
          type="date"
          value-format="yyyy-MM-dd "
          format="yyyy-MM-dd "
        ></el-table-column>
      </el-table>

      <!-- 分页查询 -->
      <el-pagination
        background
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 290px; text-aling: center; float: right"
        layout="total,prev,pager,next,jumper"
        @current-change="getList"
      />
    </div>
  </div>
</template>

<script>
import administratorApi from "@/api/hr/administrator";
export default {
  data() {
    return {
      list: [],
      page: 1,
      limit: 5,
      total: 0,
      AdministratorVoQuery: {
        name: "",
        number: "",
      },
    };
  },
  created() {
    //页面渲染之前执行，一般调用method里面定义的方法
    this.getList();
  },
  methods: {
    getList(page = 1) {
      this.page = page;
      administratorApi
        .condition(this.page, this.limit, this.AdministratorVoQuery)
        .then((response) => {
          //成功
          //response接口返回数据
          console.log(response);
          this.list = response.data.rows;
          this.total = response.data.total;
        })
        .catch((error) => {
          console.log(error);
        }); //失败
    },

    onSubmit() {
      administratorApi
        .condition(1, this.limit, this.AdministratorVoQuery)
        .then((res) => {
          console.log(res);
          this.page = 1;
          this.list = res.data.rows;
          this.total = res.data.total;
        });
    },
    reseDdta() {
      this.AdministratorVoQuery = {};
      this.getList();
    },
  },
};
</script>
